<template>
    <view>
        <view class="page-section">
            <image class="page-section-video" :src="special.rank_img"></image>
        </view>
        <view class="page-tab">
            <view @tap="bindtab" :class="'page-tab-item ' + (tab == 1 ? 'selected' : '')" data-id="1" data-index="1">
                <view class="page-tab-type">
                    <text>排行榜单</text>
                </view>
            </view>
            <view @tap="bindtab" :class="'page-tab-item ' + (tab == 0 ? 'selected' : '')" data-id="0" data-index="0">
                <view class="page-tab-type">
                    <text>获奖权益</text>
                </view>
            </view>
        </view>
        <view style="width: 100%; background: #fff; margin-top: 20rpx; min-height: 800rpx">
            <view id="content" v-if="tab == 0">
                <!-- <template is="wxParse" :data="wxParseData:count_rank_desc.nodes"/> -->
                <mp-html :content="article_count_rank_desc"></mp-html>
            </view>
            <view id="content" style="background-color: #fff; min-height: 800rpx; width: 750rpx" v-if="tab != 0">
                <view class="user_rang t_c h4">
                    <view class="rang_row fl w_100">
                        <view class="w_15">排名</view>
                        <view class="w_15">照片</view>
                        <view class="w_40">选手姓名</view>
                        <view class="w_20">人气</view>
                    </view>
                    <view class="rang_row fl w_100" v-for="(item, index) in voteRes" :key="index">
                        <view class="w_15">
							<!-- {{'../../resource/images/order_ico/rank' + (index + 1) + '.png'}} -->
                            <image class="rang_three" :src="require(`../../resource/images/order_ico/rank${index+1}.png`)" v-if="index + 1 <= 3"></image>
                            <image class="rang_three" :src="require(`../../resource/images/order_ico/icon-${index+1}@2x.png`)" v-if="index + 1 > 3 && index + 1 <= 10"></image>
                            <text class="rang_num rad_3" v-else-if="index + 1 > 10">{{ index + 1 }}</text>
                        </view>

                       <view class="w_15 w_space"><image :src="item.pic" style="width: 56rpx; height: 80rpx"></image></view>

                        <view class="w_40 w_space">{{ item.name }}</view>

                        <view class="w_20">{{ item.votes }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view :class="'footer ' + themes"></view>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            special_id: 0,

            special: {
                rank_img: ''
            },

            voteRes: {},
            tab: 1,
            article_count_rank_desc: '',
            themes: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var special_id = options.special_id;
        var that = this;
        app.globalData.util.request({
            url: 'lives_new&r=count_rank',
            data: {
                special_id: special_id
            },
            cachetime: '0',
            showLoading: true,
            success: function (t) {
                var a = t.data.data;
                //i.wxParse('count_rank_desc', 'html', a.special.rank_content, that, 5)
                that.article_count_rank_desc = that.escape2Html(a.special.rank_content);
                that.setData({
                    special_id: special_id,
                    special: a.special,
                    voteRes: a.voteRes
                });
            }
        });
    },
    //小程序分享
    onShareAppMessage: function () {
        return {
            title: '赛区榜单',
            path: '/wxz_wzbagent/pages/count_rank/index?special_id=' + this.special_id
        };
    },
    onShareTimeline: function () {
        return {
            title: '赛区榜单',
            path: '/wxz_wzbagent/pages/count_rank/index?special_id=' + this.special_id
        };
    },
    methods: {
        bindtab: function (t) {
            var e = t.currentTarget.dataset.id;
            this.setData({
                tab: e
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
